
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class 与 Style 绑定</title>
    <script src="../Vue-Lib/dist/vue.js"></script>
    <style>
        .active{
            background-color: aqua;
        }

        .fontStyle{
            font-size: 20px;
        }

    </style>
</head>
<body>

<div id="app4">
    <h1>Class 与 Style 绑定</h1>
    <p>
        操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
        <br>
        我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
    </p>

    <h2>绑定 HTML Class</h2>
    <h4>对象语法</h4>
    <p  v-bind:class="{'active':isActive,'fontStyle':isActive}">普通绑定class</p>
    <p  v-bind:class="classObject">计算属性class</p>

    <h4>数组语法</h4>
    <p>我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。数组语法也可以使用</p>
    <div v-bind:class="[activeClass, errorClass]">bind class的使用</div>
    <div v-bind:class="isActive?activeClass:errorClass">表达式绑定</div>

    <h2>绑定内联样式</h2>
    <h4>对象语法</h4>
    <div v-bind:style="{color :activeColor,fontSize:fontSize +'px' }">显示自定义方式</div>
    <div v-bind:style="styleObject">直接绑定到样式对象</div>

    <h4>数组语法</h4>
    <div v-bind:style="[styleObject,styleObject1]">数组样式</div>


</div>


<script>
    var vm = new Vue({
        el:'#app4',
        data:{
            isActive: false,
            activeClass: 'active',
            errorClass: 'fontStyle',
            activeColor: 'green',
            fontSize: 30,
            styleObject:{
                fontSize: 30,
                color: 'red'
            },
            styleObject1:{
               backgroundColor: 'yellow'

            }

        },
        computed:{
            classObject:function () {
                return {
                    active: this.isActive,
                    fontStyle: this.isActive
                }
            }
        }

    });
</script>


</body>
</html>